<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>formData测试</title>
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <link rel="stylesheet" href="/static/css/login.css">
        <script src="/static/js/jquery-3.2.1.js"></script>
</head>
<body>
    <div class="container">

        <div class="row">
            <div class="col-md-6">
                <form id="post_form">
                  <div class="form-group">
                    <label for="username">username</label>
                    <input type="email" class="form-control" id="username" placeholder="用户名">
                  </div>

                  <div class="form-group">
                    <label for="pwd">Password</label>
                    <input type="password" class="form-control" id="pwd" placeholder="密码">
                  </div>

                  <div class="form-group">
                    <label for="upload_file">File input</label>
                    <input type="file" id="upload_file">
                    <p class="help-block">文件不能大于10M</p>
                  </div>

                  <input type="button" class="btn btn-success" id="submit_btn" value="提交">
                    {% csrf_token %}
                </form>

            </div>

        </div>
    </div>

</body>
<script>


    $('#submit_btn').click(function () {
        var $form_data = new FormData();
        $form_data.append("file", $("#upload_file")[0].files[0]);
        $form_data.append("username", $("#username").val());
        $form_data.append("file", $('#pwd').val());
        $form_data.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val());
        $.ajax({
            url: '/test/',
            type:"POST",
            data: $form_data,
            processData: false,
            contentType: false,
            success: function(data){
                console.log(data)
            }
        })
    });


</script>

</html>